<template>
  <div class="type1 playlist">
    <div class="info">
      <div class="bg-img">
        <img class="img" v-lazy="Disc.imgUrl" width="100">
        <div class="mask" />
        <div class="cd-background" />
<!--        <div class="counts">{{formatCounts(Data.playCount)}}</div>-->
        <icon-svg class="type-icon" icon-class="yinzhishengji"/>
      </div>
      <div class="details">
        <div class="name" v-html="Data.name" />
        <div class="user">
          <img class="avatar" v-if="Data.userAvatar" v-lazy="Data.userAvatar+'?param=32y32'" width="32">
          <div class="avatar-name" v-html="Data.userName" />
        </div>
        <div class="desc" v-if="Data.desc">介绍：{{Data.desc}}</div>
      </div>
    </div>

    <ul class="info2" :style="{padding: padding + 'px 20px'}">
      <li class="item">播放量：{{formatCounts(Data.playCount)}}</li>
      <li class="item">收藏数：{{formatCounts(Data.subscribedCount)}}</li>
      <li class="item">评论数：{{formatCounts(Data.commentCount)}}</li>
      <li class="item">分享数：{{formatCounts(Data.shareCount)}}</li>
    </ul>

    <ul class="operation">
      <li class="like" :class="{myself: Data.userId && userId === Data.userId}" @click="SubscribePlayList">
        <icon-svg :icon-class="Data.subscribed ? 'xihuan' : 'buxihuan'"/>
        <div class="nums" v-text="Data.subscribed ? '喜欢' : '不喜欢'"/>
      </li>
      <li class="comment" @click="comment">
        <icon-svg icon-class="pinglun" />
        <div style="padding-left: 5px">评论</div>
      </li>
      <li class="share" @click="share">
        <icon-svg icon-class="fenxiang" />
        <div style="padding-left: 5px">分享</div>
      </li>
    </ul>

  </div>
</template>

<script>
/* 歌单信息组件 */
import { FormatCount } from 'common/js/utils'
import { SubscribeAsync } from 'api/playlist'

export default {
  name: 'type1',
  props: {
    height: {
      type: Number,
      default: 0
    },
    scrollY: {
      type: Number,
      default: 0
    },
    Data: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    SubscribePlayList () {
      if (this.userId === this.Data.userId) return
      SubscribeAsync(this.Data.id, this.Data.subscribed ? 2 : 1).then(res => {
        const Data = Object.assign({}, this.Data, {
          subscribed: !this.Data.subscribed
        })
        this.$emit('update:data', Data)
      }).catch(() => {})
    },
    formatCounts: (value) => FormatCount(value),
    share () {
      this.$emit('share')
    },
    comment () {
      this.$emit('comment')
    }
  },
  computed: {
    userId () {
      return this.$store.state.user.userId
    },
    Disc () {
      return this.$store.state.Disc
    },
    padding () {
      return `${(this.height - this.$store.state.StatusBarHeight - this.$config.nav_bar_height - 196) / 2}`
    },
    operationStyle () {
      return {
        // padding: `${(this.height - this.$store.state.StatusBarHeight - 208) / 2}px 0`
        padding: '20px 0'
      }
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .type1 {
    padding: 8px 12px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    z-index: 10;
  }
  .info {
    display: flex;
    .bg-img {
      height: 100px;
      position: relative;
      .img, .mask {
        border-radius: 8px;
        overflow: hidden;
      }
      .mask, .cd-background, .counts { position: absolute }
      .mask {
        width: 100%;
        height: 30px;
        bottom: 0;
        background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.7));
      }
      .cd-background {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transform: scale(0.85) translateX(15px);
        background: rgba(255,255,255,.2);
        border-radius: 11px;
        z-index: -1;
      }
      .counts {
        right: 8px;
        bottom: 4px;
        color: white;
        font-size: @font-size-medium;
      }

      .type-icon {
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .details {
      padding-left: 20px;
      flex: 1;
      color: white;
      overflow: hidden;
      .name {
        width: 100%;
        height: 2em;
        margin-bottom: 8px;
        text-align: left;
        letter-spacing: 2px;
        font-size: @font-size-large;
        .line-2();
      }
      .user {
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        .avatar { border-radius: 50% }
      }
      .desc {
        /*width: 80%;*/
        /*height: 1em;*/
        text-align: left;
        .no-wrap();
      }
    }
  }
  .info2 {
    display: flex;
    flex-wrap: wrap;
    color: white;
    .item {
      padding-left: 20px;
      flex-basis: 50%;
      text-align: left;
      box-sizing: border-box;
    }
  }
  .operation {
    height: 48px;
    margin: 0 20px;
    display: flex;
    background: @color-background;
    border-radius: 48px;
    overflow: hidden;
    opacity: .95;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.2);
    >li {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #222;
      .nums { padding-left: 5px }
    }
    svg { font-size: calc(@font-size-large-x + 3px) }
    .like.myself { opacity: .2 }

  }

</style>
